<template>
  <view>
    <image class="advert" src="https://yixinchong.oss-cn-beijing.aliyuncs.com/uploads/20231023/930be7b8fb60adf263023eb22076731c.jpg" mode=""></image>
    <view class="relative">
      <status-bar></status-bar>
      <view class="difjend">
        <view class="number" @click="start">
          跳过{{nums}}
        </view>
      </view>
      <view class="detail" style="margin-top: 1000rpx;" @click="goNext">
        查看详情
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

let timer = null;
let nums = ref(3);

onMounted(() => {
  times();
})

function times(){
  timer = setInterval(() => {
    nums.value--;
    if (nums.value == 0) {
      clearInterval(timer)
      uni.redirectTo({
        url: '/pages/index/index'
      });
    }
  }, 1000)
}
function start(){
  clearInterval(timer);
  uni.redirectTo({
    url: '/pages/index/index'
  });
}
function goNext(){
  start();
}
</script>

<style lang="scss" scoped>
  .advert {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 750rpx;
    z-index: 0;
  }
  .relative {
    position: relative;
  }
  .difjend {
    display: flex;
    justify-content: flex-end;
    margin-right: 32rpx;
    padding-top: 20rpx;
  }
  .number {
    color: #FFFFFF;
    text-align: center;
    border: 0.5px solid #FFFFFF;
    border-radius: 100rpx;
    width: 120rpx;
    padding-bottom: 10rpx;
    padding-top: 10rpx;
  }
  .detail {
    color: #FFFFFF;
    text-align: center;
    border: 0.5px solid #FFFFFF;
    border-radius: 100rpx;
    margin-right: 40rpx;
    margin-left: 40rpx;
    padding: 20rpx 0;
  }
</style>